<!--
 * @Author: wupeiwen <javapeiwen2010@gmail.com>
 * @Date: 2022-05-26 13:26:44
 * @LastEditors: wupeiwen <javapeiwen2010@gmail.com>
 * @LastEditTime: 2023-03-22 11:01:14
 * @FilePath: /tea-garden-web/src/components/component-gauge.vue
 * @Description: 仪表盘
-->
<template>
  <div id="gauge">
  </div>
</template>

<script>
import { Chart } from '@antv/g2'

export default {
  data () {
    return {
      chart: null
    }
  },
  props: {
    data: {
      type: Number,
      default: 50
    },
    color: {
      type: String,
      default: '1890FF'
    },
    valueRange: {
      type: Object,
      default: function () {
        return {
          min: 0,
          max: 100
        }
      }
    }
  },
  watch: {
    data () {
      if (this.chart) {
        this.chart.changeData(this.data)
      }
    }
  },
  methods: {
    initChart () {
      this.chart = new Chart({
        container: 'gauge',
        autoFit: true,
        padding: [0, 0, 30, 0]
      })

      this.chart.coordinate('polar', {
        startAngle: (-9 / 8) * Math.PI,
        endAngle: (1 / 8) * Math.PI,
        radius: 0.75
      })
      const { min, max } = this.valueRange

      this.chart.scale('value', {
        min, max
      })

      this.chart.axis(false)
      this.chart.legend(false)
      this.chart
        .point()
        .position('value*1')
        .color('#1890FF')

      // 绘制仪表盘背景
      this.chart.annotation().arc({
        top: false,
        start: [0, 1],
        end: [9, 1],
        style: {
          stroke: '#CBCBCB',
          lineWidth: 18,
          lineDash: null
        }
      })

      // 绘制指标
      this.chart.annotation().arc({
        start: [0, 1],
        end: [7, 1],
        style: {
          stroke: '#1890FF',
          lineWidth: 20,
          lineDash: null
        }
      })

      this.chart.render()
    }
  },
  mounted () {
    this.initChart()
  },
  beforeUnmount () {
    if (this.chart) {
      this.chart.destroy()
    }
  }
}
</script>

<style>
</style>
